<template>
    <div>
<!--        使用{{变量名}}的方式引用data中声明的变量-->
        <el-link href="https://element.eleme.io" target="_blank">{{welcome}}</el-link>
        

<!--        在标签内部使用:引用data中声明的变量-->
        <el-input :placeholder="input_placeholder" v-model="input_text"></el-input>
<!--        使用v-model获得input中输入的数据-->
	<el-button @click="send_post">
            发送
        </el-button>
	
        <el-slider v-model="slider_value" :show-tooltip="false"></el-slider>
        <el-button @click="add_slider_value">+</el-button>
        <el-button @click="reduce_slider_value">-</el-button>

        <div id="div_example">

        </div>

        <p>{{today_time}}</p>
        <p>{{number}}</p>
    </div>
</template>

<script>
// 引用其他JS文件中的函数
    import * as common from '@/utils/common'

    export default {
        name: "Home",
        data() {
            return {
                // 定义本页面中使用的全局变量
                'welcome': '考研资讯，快人一步',
                'result': 0,
                'slider_value': 50,
                'today_time': 0,
                'number': 8,

                'input_placeholder': 'welcome vue',
                'input_text': ''
            }
        },
        // 定义函数
        methods: {
            send_post() {
                // 使用/api替代了http://10.245.142.226:7779
                // /letter2number 对应后端sanic的接口名
                // 发送的数据要符合接口要求
                this.$request.post('/api/letter2number', {
                    'letter': 'a'
                }).then((response) => {
                    // 回调函数，获取后端返回的数据
                    console.log(response.data)
                }).catch((error) => {
                    // 捕捉异常并抛出
                    console.log(error);
                })
            },

            add_slider_value() {
                // 使用this访问data()中定义的变量
                this.slider_value += 1;
            },

            reduce_slider_value() {
                this.slider_value -= 1;
            }
        },

        // 具体详见vue的生命周期
        created() {
            // 调用common中的函数做格式化处理
            let day = new Date();
            this.today_time = common.formatTime(day);
            console.log(this.today_time);
            this.number = common.formatNumber(this.number);
        }
    }
</script>

<style scoped>
 /*修饰页面组件*/
    #div_example {
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>